import React, { Component } from "react";
import axios from "axios";
export default class Search extends Component {
  // https://api.github.com/search/users?q=xia
  // http://localhost:5000/search/users

  searchUser = () => {
    // 获取用户输入内容
    const { ipt } = this;
    const { updateApps } = this.props;
    updateApps({ isFrist: false, isLoading: true });
    // 发送网络请求
    axios.get(`http://localhost:3000/search/users?q=${ipt.value}`).then(
      (res) => {
        updateApps({ users: res.data.items, isFrist: false, isLoading: false });
      },
      (error) => {
        updateApps({ isLoading: false, isError: true });
      }
    );
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            ref={(c) => (this.ipt = c)}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.searchUser}>Search</button>
        </div>
      </section>
    );
  }
}
